<div class="text_slider_inner">
  <div class="cover-text-slider">
    <div class="container">
      <div class="cover_slider">
        <div class="Slide_initialize">
          {% for block in section.blocks %}
            <div class="slide_single">
              <div class="image_cover">
                <img width="" height="" src="{{ block.settings.logo_img |  image_url: width:'276x' }}"/>
              </div>
              <div class="text_cover">
                {% if block.settings.text_head != blank %}
                  <h3 class="heading">{{ block.settings.text_head }}</h3>
                {% endif %}
                {% if block.settings.text_content != blank %}
                  <p class="section_content">{{block.settings.text_content}}</p>
                {% endif %}
              </div>
            </div>
          {% endfor %}
        </div> 
        <div class="custom-arrows">
          <button class="prev">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14 20L24 10L25.4 11.4L16.8 20L25.4 28.6L24 30L14 20Z" fill="#000000"></path>
            </svg>
          </button>
          <button class="next">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M26 20L16 30L14.6 28.6L23.2 20L14.6 11.4L16 10L26 20Z" fill="#000000"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .text_slider .cover-text-slider .cover_slider{
    max-width: 854px;
    margin:0 auto;
  }
  .text_slider{
    margin-top: 144px;
    margin-bottom: 144px;
  }
  .text_slider .cover-text-slider .cover_slider .slide_single{
      text-align: center;
  }
  .text_slider .cover-text-slider .cover_slider .slide_single .image_cover{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
  }
  .text_slider .cover-text-slider .cover_slider .slide_single .text_cover .section_content{
    font-weight: 700;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: 0px;
    text-align: center;
  }
  .text_slider .cover-text-slider{
    position: relative;
  }
  .text_slider .cover-text-slider .cover_slider .custom-arrows {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
  }
  .text_slider .cover-text-slider .cover_slider .custom-arrows .slick-dots{
    position: static;
    width: max-content;
    order:2;
    display: flex;
    gap:16px;
  }
  .text_slider .cover-text-slider .cover_slider .custom-arrows .slick-arrow{
    width:40px;
    height:40px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .text_slider .cover-text-slider .cover_slider .custom-arrows .slick-arrow svg{
    width:auto !important;
  }
  .text_slider .cover-text-slider .cover_slider .custom-arrows .prev{
    order:1;  
    outline: 0;
    box-shadow: none;
  }
  .text_slider .cover-text-slider .cover_slider .custom-arrows .next{
    order:3;
    outline: 0;
    box-shadow: none;
  }
  .text_slider .cover-text-slider .cover_slider .custom-arrows .slick-dots li{
    margin: 0;
    width: auto;
    height: auto;
  }
  .text_slider .cover-text-slider .cover_slider .custom-arrows .slick-dots li span{
    width: 6px;
    height: 6px;
    background: #999999;
    border-radius:50%;
    display: block;
  }
  .text_slider .cover-text-slider .cover_slider .custom-arrows .slick-dots li.slick-active span{
    background: #007AFF;
  }
  {% if section.settings.bg_log_image != blank %}
    .text_slider .cover-text-slider .cover_slider{
      background-repeat: no-repeat;
      background-image: url({{ section.settings.bg_log_image |  image_url: width: '100x' }});
    }
  {% endif %}
  @media(max-width:768px){
    .text_slider{
      margin-top: 96px;
      margin-bottom: 96px;
    }
    .text_slider .text_slider_inner .container{
      padding-right: 16px;
      padding-left: 16px;
    }
    .text_slider .cover-text-slider .cover_slider{
      background-position: 5px 20px;
      background-size: 69px;
    }
    .text_slider .cover-text-slider .cover_slider .slide_single .image_cover{
      padding:16px;
    }
    .text_slider .cover-text-slider .cover_slider .slide_single .text_cover .section_content{
      font-weight: 700;
      font-size: 20px;
      line-height: 120%;
      letter-spacing: 0px;
      text-align: center;
    }
  }
</style>
<script>
  $('.Slide_initialize').slick({
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    adaptiveHeight: true,
    arrows: true,
    prevArrow: $('.custom-arrows .prev'),
    nextArrow: $('.custom-arrows .next'),
    dots: true,
    appendDots: $('.custom-arrows'),
    customPaging: function(slider, i) {
      return '<span class="dot"></span>';
    }    
  });
</script>
{% schema %}  
{
  "name": "Text slider",
  "class": "text_slider",
  "tag": "section",
  "settings": [
    {
      "type": "image_picker",
      "id": "bg_log_image",
      "label": "Background quote image"
    }
  ],
  "blocks": [
    {
      "name": "text slide",
      "type": "text_slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "logo_img",
          "label": "Select logo image"
        },
        {
          "type": "text",
          "id": "text_head",
          "label": "Text slide heading"
        },
        {
          "type": "textarea",
          "id": "text_content",
          "label": "Text slide content"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "text slider"
    }
  ]
}
{% endschema %}
